<template>
  <div class="track_the_playback">
    <div class="around">
      <!-- 设置时间 -->
      <el-select v-model="areaValue" placeholder="请选择区域">
        <el-option
          v-for="(item, index) in selectArea"
          :value="item.CLIENT_GROUP_NO"
          :label="item.CLIENT_GROUP_NAME"
          :key="index"
        ></el-option>
      </el-select>
      <span class="buttonI" @click="getRoudAllGPS">查询</span>
      <i class="el-icon-speed">道路名称</i>
      <el-select
        v-model="RoadNameValue"
        placeholder="请选择道路"
        ref="workcarname"
        filterable
        clearable
      >
        <el-option
          v-for="(item, index) in selectRoadName"
          :label="item.Rname"
          :value="item.Rname"
          :key="index"
        ></el-option>
      </el-select>

      <span class="buttonI" @click="changeRoadSelect">查询</span>
      <span class="buttonI" title="测距" @click="setDistance">测距</span>
      <span style="margin-left: 5px">
        <el-switch
          class="el-checkbox-show"
          v-model="isShow.switchRoad"
          active-color="#696969"
          @change="showRoadName"
        ></el-switch>
        <i class="el-icon-speed" title="道路名称标签" style="margin-left: 10px"
          >道路名称标签</i
        ></span
      >
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="mapPlayback"></div>
    </div>
    <!-- 上方显示隐藏图标操作栏,多选 -->
    <!-- <div class="map-operation">
      <ul>
        <li
          v-for="(item,index) in mapOperationsList"
          :class="{'active': item.active}"
          :key="index"
          @click="changeOperationValue(item, index)"
        >
          <i :class="item.icon"></i>
          {{ item.name }}
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { formatDate } from '@/common/js/date.js'

import DirectionImg from '@/assets/img/playback/direction.png'
import DirectionImg1 from '@/assets/img/playback/direction1.png'
import ImageStart from '@/assets/img/playback/begin3.png'
import ImageEnd from '@/assets/img/playback/end3.png'

import imgMarkerCLC from '@/assets/img/marker/markerImageCLC.png'
import imgMarkerZZZ from '@/assets/img/marker/markerImageZZZ.png'
import imgMarkerNCD from '@/assets/img/marker/markerImageLarge.png'
import imgMarkerCY from '@/assets/img/marker/markerImageSmall.png'
import imgMarkerXQCY from '@/assets/img/marker/markerImageVillage.png'
import html2canvas from "html2canvas";
export default {
  data () {
    return {
      notifyRoadName: null,
      RoadNameValue: '',
      arrSelectRoadLayer: [],
      arrayRoadName: [],
      isHHCar: false,
      isShow: {
        switch0624: true,
        switchOriginal: true,
        switchNew: true,
        switchFinal: true,
        switchLastTime: true,
        switchRoad: false,
      },
      fgw: {
        lineOriginal: null,
        lineNew: null,
        lineFinal: null,
        lineLastTime: null,
        line0624: null,
        pointCollectionOriginal: null,
        pointCollectionOriginalSuper: null,
        pointCollectionNew: null,
        pointCollectionFinal: null,
        pointCollectionLastTime: null,
        pointCollection0624: null,
      },
      array: {
        pointOriginal: [],
        pointNew: [],
        pointFinal: [],
        pointLastTime: [],
        point0624: [],
        roadPolyline: [],
      },
      setSlider: {
        max: 100,
        value: 0,
        step: 1
      },
      mapCursor: null,
      map: null,
      mapZoom: 20,
      markerWithSlider: null,
      dataListDialog: false,
      dataCurrentIndex: 0,
      isShowTimeTap: true,
      isShowDateTimeTap: false,
      dialogFormVisible: false,
      ary: [],

      VID: 0,
      setTime: {
        show: false,
        // startTime: new Date(new Date() - 3600 * 1000 * 24),
        // endTime: new Date()
        startTime: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd hh:mm:ss'),
        endTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
      },
      timeId: null,
      // 速度
      speed: {
        show: false,
        value: 0.2
      },
      // 步数
      step: {
        show: false,
        value: 1
      },
      mapOperationsList: [{
        name: '转运站',
        icon: 'el-icon-knife-fork',
        active: false
      }, {
        name: '处理厂',
        icon: 'el-icon-tableware',
        active: false
      }, {
        name: '农村垃圾点',
        icon: 'el-icon-refrigerator',
        active: false
      }, {
        name: '小区垃圾点',
        icon: 'el-icon-refrigerator',
        active: false
      }, {
        name: '餐饮单位',
        icon: 'el-icon-refrigerator',
        active: false
      }],
      workCarList: [],
      workCarSelectTypeList: [],
      carTypeValue: '全部',
      areaValue: '',
      selectArea: [],
      selectRoadName: [],
      selectCarType: [{
        value: '全部',
        label: '全部'
      }, {
        value: '机扫车',
        label: '机扫车'
      }, {
        value: '小型机扫车',
        label: '小型机扫车'
      }, {
        value: '吸尘车',
        label: '吸尘车'
      }, {
        value: '洒水车',
        label: '洒水车'
      }, {
        value: '高压清洗车',
        label: '高压清洗车'
      }, {
        value: '洗路车',
        label: '洗路车'
      }, {
        value: '多功能洗扫车',
        label: '多功能洗扫车'
      }, {
        value: '除雪车',
        label: '除雪车'
      }],
      isshow: {

      },
      MapOverlay: {
        arrayCLCMapOverlay: [],
        arrayZZZMapOverlay: [],
        arrayNCDMapOverlay: [],
        arrayCYMapOverlay: [],
        arrayXQCYMapOverlay: []
      },
      Data: {
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: []
      }
    }
  },
  methods: {
    // 测距
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map);
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close();
      } else {
        // 开始测量
        this.mapCursor.open();
      }
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = new BMap.Map('mapPlayback');
      this.map.enableScrollWheelZoom(true)
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('LNG'), localStorage.getItem('LAT')), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别

      // var myIcon = new BMap.Icon(DirectionImg, new BMap.Size(32, 32), { anchor: new BMap.Size(20, 20) })
      // this.markerWithSlider = new BMap.Marker(new BMap.Point(0, 0), { icon: myIcon })
      // this.markerWithSlider.disableMassClear()
      // this.map.addOverlay(this.markerWithSlider)
    },
    async getClientInfo () {
      // const loading = this.$loading({
      //   lock: true,
      //   text: '数据加载中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.5)'
      // })
      var url = 'Vehicle/GetClientInfo?client_no=' + localStorage.getItem('CLIENT_NO')
      let { data } = await this.$Http.get(url)
      this.selectArea = data;
      if (data.length > 0) {
        this.areaValue = data[0].CLIENT_GROUP_NO
        this.getRoadName(data[0].CLIENT_GROUP_NAME)
        this.getRoudAllGPS()
      }
      // loading.close()
    },
    async getRoadName (name) {
      var url = 'Vehicle/GetClientRoadName?ClientNO=' + name
      let { data } = await this.$Http.get(url)
      this.selectRoadName = data;
    },
    // 编辑经纬度信息
    async getRoudAllGPS () {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      this.map.clearOverlays()
      this.array.roadPolyline = []
      this.arrayRoadName = []

      var url = "Vehicle/GetClientRoadGPSInfoModify?ClientNO=" + this.areaValue
      const { data } = await this.$Http.get(url)
      this.workCarSelectTypeList = data
      var rid = data[0].ROUDID
      var rname = data[0].NAME
      var rGrade = data[0].RGrade
      var points = []
      var pointAll = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === rid && element.NAME === rname) {
          points.push(new BMap.Point(element.LNG, element.LAT))
          pointAll.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoad(rid, rname, rGrade, points)

          rid = element.ROUDID
          rname = element.NAME
          rGrade = element.RGrade
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
          pointAll.push(new BMap.Point(element.LNG, element.LAT))
          // districtName = element.行政区划
        }
        element.numS = points.length
      }
      this.drawRoad(rid, rname, rGrade, points)
      this.map.setViewport(pointAll);
      loading.close()
      // this.getRoadUnSettingInitial()
    },
    drawRoad (rid, rname, rGrade, points) {
      // 道路画线
      var polyline = new BMap.Polyline(points, { strokeColor: "#696969", strokeWeight: 10, strokeOpacity: 0.5 });   //创建折线
      this.map.addOverlay(polyline);
      // polyline.disableMassClear()

      polyline.rid = rid
      polyline.rname = rname
      polyline.rGrade = rGrade

      this.array.roadPolyline.push(polyline)

      var lineCenter = polyline.getBounds().getCenter()

      // this.arrayRoadName.push({
      //   geometry: {
      //     type: 'Point',
      //     coordinates: [lineCenter.lng, lineCenter.lat]
      //   },
      //   text: rname,
      //   roadID: rid
      // })

      var label = new BMap.Label(rname, { position: lineCenter, offset: new BMap.Size(-20, -10) })
      polyline.LabelP = label
      label.rGrade = rGrade

      label.setStyle({
        borderColor: '#fff',
        padding: '2px',
        borderRadius: '5px', // 可能内存成本很高
      })
      this.map.addOverlay(label);
      this.arrayRoadName.push(label)
      if (!this.isShow.switchRoad) {
        label.hide()
      }

      const _this = this
      polyline.addEventListener('click', function (e) {


        // 信息窗体
        // const opts = {
        //   width: 180,     // 信息窗口宽度
        //   height: 50,     // 信息窗口高度
        //   title: '道路名称', // 信息窗口标题
        // }
        // const str = `<p style="margin-top: 15px;">${this.rname}</p>`
        // const infoWindow = new BMap.InfoWindow(str, opts)  // 创建信息窗口对象 
        // _this.map.openInfoWindow(infoWindow, e.point) //开启信息窗口
        _this.selectRoad(this.rname)
      })
    },
    clearSelectRoad () {
      console.log('close')
      if (this.arrSelectRoadLayer.length > 0) {
        this.arrSelectRoadLayer.forEach(element => {
          this.map.removeOverlay(element)
        });
        this.arrSelectRoadLayer = []
      }
    },
    changeRoadSelect () {
      this.selectRoad(this.RoadNameValue)
    },
    selectRoad (rname) {
      this.clearSelectRoad()
      var rid = 0
      var points = []
      var pointAll = []

      if (this.notifyRoadName) {
        this.notifyRoadName.close();
      }
      const _this = this
      this.notifyRoadName = this.$notify.info({
        title: rname,
        duration: 0,
        position: 'bottom-right',
        onClose: () => {
          _this.clearSelectRoad()
        }
      });
      for (let index = 0; index < this.workCarSelectTypeList.length; index++) {
        const element = this.workCarSelectTypeList[index];
        if (element.NAME === rname) {
          if (rid === element.ROUDID || rid === 0) {
            rid = element.ROUDID
            points.push(new BMap.Point(element.LNG, element.LAT))
            pointAll.push(new BMap.Point(element.LNG, element.LAT))
          } else {
            this.drawSelectRoad(rid, points)
            rid = element.ROUDID
            points = []
            points.push(new BMap.Point(element.LNG, element.LAT))
            pointAll.push(new BMap.Point(element.LNG, element.LAT))
          }
        }
      }
      this.drawSelectRoad(rid, points)
      this.map.setViewport(pointAll);
    },
    drawSelectRoad (rid, points) {

      var polyline = new BMap.Polyline(points, { strokeColor: "#FF1493", strokeWeight: 10, strokeOpacity: 0.7 });   //创建折线
      this.map.addOverlay(polyline);
      this.arrSelectRoadLayer.push(polyline)
    },
    showRoadName () {
      this.arrayRoadName.forEach(element => {
        if (!this.isShow.switchRoad) {
          element.hide()
        } else {
          element.show()
        }
      });
    },
    // 格式化播放间隔
    formatSpeed (val) {
      return val + ' 秒播放一步'
    },
    formatTooltipSlider (val) {
      if (val > 0) {
        return this.array.pointFinal[val - 1].GPSTIME
      }
    },
  },
  mounted () {
    // 显示地图  
    this.mapShow()
    this.getClientInfo()


  }
}
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .around {
    padding: 10px;
    background-color: #007acc;
    height: 100%;
    border-radius: 5px;
    &:first-child {
      padding-left: 10px;
      height: auto;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        //width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      // .el-icon-s-operation {
      //   font-size: 22px;
      // }
    }
  }
  .arounds {
    padding: 10px;
    background-color: #007acc;
    height: 35px;
    border-radius: 5px;
    // &:first-child {
    //   padding-left: 10px;
    //   height: auto;
    //   i {
    //     color: #fff;
    //     font-size: 18px;
    //     font-weight: bold;
    //     //width: 30px;
    //     height: 30px;
    //     line-height: 28px;
    //     text-align: center;
    //     vertical-align: middle;
    //     cursor: pointer;
    //     margin-right: 15px;
    //   }
    //   // .el-icon-s-operation {
    //   //   font-size: 22px;
    //   // }
    // }
  }
  .container {
    flex: 1;
    #mapPlayback {
      height: 100%;
    }
  }
}
h2 {
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  border-bottom: 2px solid #ccc;
  background-color: #f1f1f1;
  i {
    float: right;
    margin-right: 10px;
  }
}
.settingWindow {
  height: calc(~'100% - 32px');
}
.data_list {
  height: 485px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 5px 3px #ccc;
  border-radius: 8px;
  overflow: hidden;
}
.set_time_box {
  width: 340px;
  height: 160px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0 0 5px 3px #ccc;
  background-color: #fff;
  h2 {
    border-bottom: 1px solid #ccc;
  }
  .settingWindow {
    padding-top: 10px;
    & > div {
      height: 26px;
      line-height: 26px;
      margin-bottom: 5px;
      padding-left: 20px;
      & > span {
        padding-right: 15px;
      }
      & > .el-button {
        float: right;
        padding: 0 5px;
        margin-right: 10px;
        height: 26px;
        bottom: 20px;
        right: 20px;
        position: absolute;
      }
    }
    /deep/.el-date-editor.el-input {
      width: 190px;
    }
    /deep/.el-input--prefix .el-input__inner {
      height: 26px;
      border-radius: 2px;
      padding: 0;
      padding-left: 5px;
      overflow: hidden;
      border-color: #007acc;
      padding: 0;
      padding-left: 20px;
    }
    /deep/.el-input__icon {
      line-height: 26px;
    }
    /deep/.el-input__prefix {
      left: -1px;
    }
  }
}
.person_top {
  width: 150px;
  height: 130px;
  position: absolute;
  left: 20px;
  top: 100px;
  background-color: #b2dfee;
  border: 1px solid #ccc;
  p {
    height: 30px;
    // text-align: center;
    padding-left: 5px;
    padding-left: 10px;
    color: #333;
    span:first-child {
      text-align: center;
      padding-top: 14px;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        background-size: 30px 30px;
      }
    }
  }
}
.speed {
  width: 300px;
  height: 120px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 5px 3px #ccc;
  background-color: #fff;
  .el-slider {
    margin: 10px 15px 0px;
    padding: 0 10px;
  }
  .el-button {
    float: right;
    margin-right: 15px;
    padding: 0 5px;
    height: 26px;
  }
  .el-switch {
    border: 2px solid #fff;
  }
}
.map-operation {
  position: absolute;
  right: 35%;
  top: 110px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 14px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        font-size: 14px;
        &:before {
          font-size: inherit;
          color: inherit;
        }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      &:last-child {
        &::before {
          display: none;
        }
      }
      &.active {
        color: #007acc;
      }
    }
  }
}

.el-icon-speed {
  margin-left: 5px;
}
.buttonI {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  padding: 5px 10px 5px 10px;
  margin: 5px;
}
.legend {
  width: 550px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5px 10px 0 10px;
  border-radius: 5px;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
    margin-bottom: 5px;
    i {
      float: right;
      cursor: pointer;
      &:before {
        color: #666;
      }
    }
  }
  p {
    // text-align: center;
    color: #333;
    float: left;
    width: 14%;
    margin-bottom: 20px;
    span {
      display: block;
      text-align: center;
      &:first-child {
        img {
          // background-size: 30px 30px;
          height: 40px;
        }
      }
    }
  }
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: #007acc;
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.road1 {
  margin: 15px;
  width: 45px;
  height: 15px;
  background-color: #f8df72;
}
.road2 {
  margin: 17px;
  width: 45px;
  height: 10px;
  background-color: #f8df72;
}
.road3 {
  margin: 19px;
  width: 45px;
  height: 5px;
  background-color: #f8df72;
}
</style>
